<template>
  <div class="set-back" v-bind:style="{height:this.windowHeight+'px'}">
   <div class="login-layout">
     <!-- 登陆div -->
       <div class="form-div">
         <!-- 登陆界面的logo -->
         <p style="text-align: center;margin: 10px 0;">
           <img src="../../../static/logo.fe46111.fe46111.png" style="width: 50%;"/>
         </p>

         <!-- from表单数据   登陆 -->
         <form>
           <p class="from-font-style">邮箱</p>
           <el-input v-model="user.email" placeholder="请输入注册邮箱"></el-input>
           <p class="from-font-style">新密码</p>
           <el-input placeholder="请输入新密码" v-model="user.password" show-password></el-input>
           <p class="from-font-style">验证码</p>
           <div>
             <el-input :style="[input_code]" placeholder="请输入邮件验证码" v-model="user.captcha"></el-input>
             <van-button @click="getCode" :disabled="!show" color="linear-gradient(to right, #4bb0ff, #6149f6)" :style="[get_code]">
                <span v-show="show">获取验证码</span>
                <span v-show="!show">{{this.count}}s后重发</span>
             </van-button>
           </div>
           <el-button type="primary" @click="changePassword()">登陆</el-button>
         </form>
       </div>
          <!-- 分割线 -->
         <el-divider></el-divider>
         <!-- 注册 忘记密码链接-->
         <p class="from-link">
           <!-- 返回登陆跳转 -->
           <a>
             <router-link to="/user/login">返回登陆</router-link>
           </a>

           <!-- 注册账户跳转 -->
           <a>
             <router-link to="/user/register">返回注册</router-link>
           </a>
         </p>
      </div>
  </div>
</template>

<script>
  import UserApi from '@/api/user.js'
  import Validate from '@/utils/validate.js'
  export default {
    data() {
      return {
        input_code:{
          width:65+'%',
          float:'left',
        },
        get_code:{
          float:"right",
          height:40+'px',
        },
        //获取验证码嘛按钮的状态
        Status:true,
        show:true,
        count:'',
        timer:null,
        // 创建对象拿来存放 账号密码
        user:{
          email:'',
          password:'',
          captcha:''
        },
        captchaCode:'',      //存储验证码
        email:'',     //村粗返回的email
        // 判断是否账号密码正确
        isTrue:false,
        windowHeight:0,
        // 接口API地址
        BASE_API: process.env.BASE_API,
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      getCode:function(){

        let _this=this
        //判断是否输入邮箱
        if(_this.user.email===''){
          // 邮箱不能为空
          _this.$message({
            showClose: true,
            message:"邮箱不能为空",
            type:'error',
             center: true
          })
        }else if(!Validate.validateEmail(_this.user.email)){   //调用正则表达式进行邮箱格式验证
          _this.$message({
            showClose: true,
            message:"请输入正确的邮箱",
            type:'error',
             center: true
          })
        }else{
        //判断email账号是否存在 存在success为true 否则为false
        //这里发送验证码
        //需要等前端 返回数据才能判断是否发送成功
        //返回信息 {"captchaCode":"790631","email":"475403147@qq.com","isSuccess":true}
        UserApi.sendEmail(_this.user.email).then(response =>{
            //判断是否成功
            if(response.data.isSuccess){
              // 将验证码保存
              _this.captchaCode = response.data.captchaCode

              //将Email 保存
              _this.email = response.data.email
              //成功后，前端响应
              //这里只能定义为const  不然这个值会发生变化
              const TIME_COUNT = 60;
              //验证嘛发送成功消息窗口
              _this.$message({
                showClose: true,
                message:"验证码发送成功",
                type:'success',
                center: true
              })
              //计时器
              if(!_this.timer){
                _this.count = TIME_COUNT
                _this.show = false
                _this.timer = setInterval(() =>{
                  if(_this.count > 1 && _this.count <= TIME_COUNT){
                    _this.count--
                  }else{
                    _this.show = true
                    clearInterval(_this.timer)
                    _this.timer = null
                  }
                },1000)
              }
            }else{
              // 失败暂且不做处理，前端不显示，验证嘛发送成功提示等....
              //邮箱不存在
              _this.$message({
                showClose: true,
                message:"邮箱不存在",
                type:'error',
                center: true
              })
            }
        })
        }
      },
    changePassword(){
      let _this = this
      //判断 邮箱是否为 之前发邮件的邮箱
      if(_this.user.email != _this.email){
          _this.$message({
            showClose: true,
            message:"请保证邮箱为验证时的邮箱",
            type:'error',
             center: true
          })
        }else if(_this.user.password==='' || _this.user.password=== null){
          _this.$message({
            showClose: true,
            message:"新密码不能为空",
            type:'error',
             center: true
          })
        }else if(_this.user.captcha==='' || _this.user.captcha=== null){
          _this.$message({
            showClose: true,
            message:"验证码不能为空",
            type:'error',
             center: true
          })
        }else if(_this.user.captcha != _this.captchaCode){
          _this.$message({
            showClose: true,
            message:"验证码不正确",
            type:'error',
             center: true
          })
        }else{
          // 这里发送请求
          UserApi.updatePassword(_this.user).then(response => {
            if(response.data.isSuccess){
              _this.$message({
                showClose: true,
                message:"修改成功",
                type:'success',
                center: true
              })
              this.$router.push({
                path:'/user/login'
              })
            }else{
              _this.$message({
                showClose: true,
                message:"修改失败",
                type:'error',
                 center: true
              })
            }
          })
        }
      }
    },
    created() {
        // 获取window.innerHeight ：浏览器内页面可用高度
        this.windowHeight=window.innerHeight;
    }
  };
</script>

<style scoped="scoped">
  /*背景模糊*/
  .set-back{
      width:100%;
      height:100%;
      position: relative;
      background-size: 100% 100%;
      background-image: url(../../../static/1.jpg);
      padding:1px;
      box-sizing:border-box;
      z-index:1;
  }
  .set-back:after{
      content: "";
      width:100%;
      height:100%;
      position: absolute;
      left:0;
      top:0;
      background: inherit;
      filter: blur(4px);
      z-index: 2;
  }
  .login-layout{
      /* width: 40%; */
      width: 450px;
      /* margin:0 auto; */
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      z-index:11;
      background: inherit;
      opacity: 0.8;
      box-shadow:  0 0 10px 6px rgba(0,0,0,0.7);
  }

  .el-button{
    position: relative;
    width: 100%;
    margin-top: 15px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, 50%);
  }
  .form-div{
    height: auto;
    padding: 40px;
    color: white;
  }

  .from-font-style{
    margin: 16px 0 8px;
    font-size: 16px;
  }
  .from-link{
/*    width: 100%;
    text-align: center; */
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }

  .from-link a{
    color: #DCDFE6;
    font-size: 14px;
    margin: 0 5px;
  }
</style>
